<template>
  <div>
    <img src=".././assets/logo.png" />
    <h1>首页</h1>
    <div>
      <ul>
        <li
          v-for="(item, index) in nameList"
          :key="index"
          @click="routerClick(item.id)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      nameList: [
        { name: 'vuex使用', id: '1' },
        { name: '组件封装', id: '2' },
        { name: '搜索变色', id: '3' },
        { name: 'js方法使用', id: '4' },
        { name: '动态样式', id: '5' }
      ]
    }
  },
  methods: {
    routerClick (id) {
      switch (~~id) {
        //   路由跳转方式一
        //   3.获取参数
        //     html取参: $route.query.id
        //     script取参: this.$route.query.id
        case 1:
          this.$router.push({ // 核心语句
            path: '/RouVuex', // 跳转的路径
            query: { // 路由传参时push和query搭配使用 ，作用时传递参数
              id: id
            }
          })

          break
        //   路由跳转方式二
        // 3.获取参数
        // html取参:$route.params.id
        // script取参:this.$route.params.id
        case 2:
          this.$router.push({ name: 'Zjfz', params: { id: id } })
          //   this.$router.push({ name: 'Zjfz' })
          break
        case 3:
          this.$router.push({ name: 'Ssbs', params: { id: id } })
          break
        case 4:
          this.$router.push({ name: 'Jsfssy', params: { id: id } })
          break
        case 5:
          this.$router.push({ name: 'Dtys', params: { id: id } })
          break
      }
    }
  },
  mounted () {
    console.log('生命周期')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
  cursor: pointer;
  font-size: 20px;
}
li:hover {
  color: #42b983;
}
a {
  color: #42b983;
}
</style>
